<!DOCTYPE html>
<html>
<body>
	<div>
		<form id="logoForm" name="logoForm">
			<input type="hidden" id="icons" name="icons" value='{{defind.icons}}'>
			<input type="hidden" id="defaultImgs" name="defaultImgs"
				value='{{defind.defaultImgs}}'> <input type="hidden"
				id="iconsPad" name="iconsPad" value='{{defind.iconsPad}}'> <input
				type="hidden" id="defaultImgsPad" name="defaultImgsPad"
				value='{{defind.defaultImgsPad}}'>
			<ul class="form-st mar-st-t30" style="display: none">
				<li>
					<p class="wid130px">界面风格：</p>
					<div>
						<label class="wid130px radio-inline"> <input type="radio"
							value="1" id="pageStyle1" name="pageStyle"> &nbsp;系统默认
						</label> <label class="wid130px radio-inline"> <input type="radio"
							value="2" id="pageStyle2" name="pageStyle"> &nbsp;个性化设置
						</label>
					</div>
				</li>
				<li>
					<p class="wid130px">皮肤选择：</p>
					<div>
						<label class="wid130px radio-inline"> <input type="radio"
							value="1" id="skinStyle1" name="skinStyle"> &nbsp;蓝色调
						</label> <label class="wid130px radio-inline"> <input type="radio"
							value="2" id="skinStyle2" name="skinStyle"> &nbsp;绿色调
						</label>
					</div>
				</li>
			</ul>
			<div class="hr-20"></div>

			<div id="androidbg_gray_bg" style="display: none">
				<div class="bg_gray_bg">
					<span>个性化LOGO设置</span> <input type="file" class="upfile"
						id="upfile" name="file">
				</div>
				<div class="container mar-st-a30">
					<div class="col-sm-5">
						<ul class="img-st-bg">
							<li>
								<button onclick="showLogo('logoAndorid','iconsContainer')" id="logoAndorid"
									type="button">
									<small class="text-muted">96×96</small>
								</button> andriod
							</li>
						</ul>
						<div class="hr-10"></div>
					</div>
					<div class="col-sm-7" id="iconsContainer">
						<p>默认生成:</p>
						<ul class="img-st-bg">
							<li><img class="img-polaroid" id="iconImage_96"
								style="width: 72px; height: 72px;" /> <small class="text-muted">96×96</small>
								&nbsp;android <span> <input type="hidden" name="logo-xdpi"
									id="iconInput_96" />
							</span></li>
							<li><img id="iconImage_72"
								style="width: 72px; height: 72px;" /> <small class="text-muted">72×72</small>
								&nbsp;android<span><input type="hidden" name="logo-hdpi"
									id="iconInput_72" /> </span></li>
							<li><img id="iconImage_48"
								style="width: 72px; height: 72px;" /> <small class="text-muted">48×48</small>
								&nbsp;android<span><input type="hidden" name="logo-mdpi"
									id="iconInput_48" /> </span></li>
							<li><img id="iconImage_36"
								style="width: 72px; height: 72px;" /> <small class="text-muted">36×36</small>
								&nbsp;android<span><input type="hidden" name="logo-ldpi"
									id="iconInput_36" /> </span></li>
						</ul>
					</div>
					<div class="bor-bot-gray2"></div>
				</div>
				<div class="bg_gray_bg">
					<span>启动页设置</span>
				</div>
				<div class="container mar-st-a30">
					<div class="col-sm-5">
						<ul class="img-st-bg">
							<li class="img-st-bg-w">
								<button onclick="showLogo('welAndroid','defaultImgsContainer')" id="welAndroid"
									type="button">
									<small class="text-muted">720×1280</small>
								</button> android
							</li>
						</ul>
						<div class="hr-10"></div>
					</div>
					<div class="col-sm-7" id="defaultImgsContainer">
						<p>默认生成:</p>
						<ul class="img-st-bg">
							<li class="img-st-bg-w"><img id="iconImage_1280"
								style="width: 72px; height: 72px;" /> <small class="text-muted">720×1280</small>
								&nbsp;andriod <span><input type="hidden" name="default-xdpi"
									id="iconInput_1280" /></span></li>
							<li class="img-st-bg-w"><img id="iconImage_800"
								style="width: 72px; height: 72px;" /> <small class="text-muted">400×800</small>
								&nbsp;android<span><input type="hidden" name="default-hdpi"
									id="iconInput_800" /></span></li>
							<li class="img-st-bg-w"><img id="iconImage_480"
								style="width: 72px; height: 72px;" /> <small class="text-muted">320×480</small>
								&nbsp;android<span><input type="hidden" name="default-mdpi"
									id="iconInput_480" /></span></li>
							<li class="img-st-bg-w"><img id="iconImage_320"
								style="width: 72px; height: 72px;" /> <small class="text-muted">200×320</small>
								&nbsp;android<span><input type="hidden" name="default-ldpi"
									id="iconInput_320" /></span></li>
						</ul>
					</div>
				</div>
			</div>
			<div id="iosbg_gray_bg" style="display: none">
				<div class="bg_gray_bg">
					<span>个性化LOGO设置</span> <input type="file" class="upfile"
						id="upfile" name="file">
				</div>
				<div class="container mar-st-a30">
					<div class="col-sm-5">
						<ul class="img-st-bg">
							<li>
								<button onclick="showLogo('iosLogo','iconsContainer')" id="iosLogo" type="button">
									<small class="text-muted">120×120</small>
								</button> iphone
							</li>
						</ul>
						<div class="hr-10"></div>
					</div>
					<div class="col-sm-7" id="iconsContainer">
						<p>默认生成:</p>
						<ul class="img-st-bg">
							<li><img class="img-polaroid" id="iconImage_120"
								style="width: 72px; height: 72px;" /> <small class="text-muted">120×120</small>
								&nbsp;iphone <span> <input type="hidden" name="logo-xdpi"
									id="iconInput_120" />
							</span></li>
							<li><img class="img-polaroid" id="iconImage_114"
								style="width: 72px; height: 72px;" /> <small class="text-muted">114×114</small>
								&nbsp;iphone <span> <input type="hidden" name="logo-hdpi"
									id="iconInput_114" />
							</span></li>
							<li><img class="img-polaroid" id="iconImage_72"
								style="width: 72px; height: 72px;" /> <small class="text-muted">72×72</small>
								&nbsp;iphone <span> <input type="hidden" name="logo-mdpi"
									id="iconInput_72" />
							</span></li>
						</ul>
					</div>
					<div class="bor-bot-gray2"></div>

					<div class="col-sm-5">
						<ul class="img-st-bg">
							<li>
								<button onclick="showLogo('ipadLogo','iconsPadContainer')" id="ipadLogo"
									type="button">
									<small class="text-muted">152×152</small>
								</button> ipad
							</li>
						</ul>
						<div class="hr-10"></div>
					</div>
					<div class="col-sm-7" id="iconsPadContainer">
						<p>默认生成:</p>
						<ul class="img-st-bg">
							<li><img class="img-polaroid" id="iconImage_152"
								style="width: 72px; height: 72px;" /> <small class="text-muted">152×152</small>
								&nbsp;ipad <span> <input type="hidden" name="logo-xdpi"
									id="iconInput_152" />
							</span></li>
							<li><img class="img-polaroid" id="iconImage_144"
								style="width: 72px; height: 72px;" /> <small class="text-muted">144×144</small>
								&nbsp; ipad <span> <input type="hidden" name="logo-hdpi"
									id="iconInput_144" />
							</span></li>
							<li><img class="img-polaroid" id="iconImage_76"
								style="width: 72px; height: 72px;" /> <small class="text-muted">76×76</small>
								&nbsp;ipad <span> <input type="hidden" name="logo-mdpi"
									id="iconInput_76" />
							</span></li>
							<li><img class="img-polaroid" id="iconImage_72"
								style="width: 72px; height: 72px;" /> <small class="text-muted">72×72</small>
								&nbsp;ipad <span> <input type="hidden" name="logo-ldpi"
									id="iconInput_72" />
							</span></li>
						</ul>
					</div>
				</div>
				<div class="bg_gray_bg">
					<span>启动页设置</span>
				</div>
				<div class="container mar-st-a30">
					<div class="col-sm-5">
						<ul class="img-st-bg">
							<li class="img-st-bg-w">
								<button onclick="showLogo('weliphone','defaultImgsContainer')" id="weliphone"
									type="button">
									<small class="text-muted">640×1136</small>
								</button> iphone
							</li>
						</ul>
						<div class="hr-10"></div>
					</div>
					<div class="col-sm-7" id="defaultImgsContainer">
						<p>默认生成:</p>
						<ul class="img-st-bg">
							<li class="img-st-bg-w"><img id="iconImage_1136"
								style="width: 72px; height: 72px;" /> <small class="text-muted">640×1136</small>
								&nbsp;iphone <span><input type="hidden" name="default-xdpi"
									id="iconInput_1136" /></span></li>
							<li class="img-st-bg-w"><img id="iconImage_960"
								style="width: 72px; height: 72px;" /> <small class="text-muted">640×960</small>
								&nbsp;iphone <span><input type="hidden" name="default-hdpi"
									id="iconInput_960" /></span></li>
							<li class="img-st-bg-w"><img id="iconImage_480"
								style="width: 72px; height: 72px;" /> <small class="text-muted">320×480</small>
								&nbsp;iphone <span><input type="hidden" name="default-mdpi"
									id="iconInput_480" /></span></li>
						</ul>
					</div>

					<div class="bor-bot-gray2"></div>
					<div class="col-sm-5">
						<ul class="img-st-bg">
							<li class="img-st-bg-w">
								<button onclick="showLogo('welIpadlan','defaultImgsPadContainer')" id="welIpadlan"
									type="button">
									<small class="text-muted">2048×1496</small>
								</button> ipad
							</li>
						</ul>
						<div class="hr-10"></div>
					</div>
					<div class="col-sm-7" id="defaultImgsPadContainer">
						<p>默认生成:</p>
						<ul class="img-st-bg">
							<li class="img-st-bg-w"><img id="iconImage_1496"
								style="width: 72px; height: 72px;" /> <small class="text-muted">2048×1496</small>
								&nbsp;ipad <span><input type="hidden" name="default-xdpi"
									id="iconInput_1496" /></span></li>
							<li class="img-st-bg-w"><img id="iconImage_748"
								style="width: 72px; height: 72px;" /> <small class="text-muted">1024×748</small>
								&nbsp;ipad <span><input type="hidden" name="default-hdpi"
									id="iconInput_748" /></span></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="container pad-st-b30 text-center">
				<button class="btn btn-primary tls" onclick="logoFormSumbit()"
					type="button">下一步</button>
			</div>
			<div class="hr-10"></div>
		</form>
	</div>
</body>
</html>
<script type="text/javascript">
	var platform = "{{platform}}";
	var appId = "{{appId}}";
	var version = "{{version}}";
	var pageStyleID = '{{defind.pageStyle}}';
	var skinStyle = '{{defind.skinStyle}}';
	if (platform == "ios") {
		$('#iosbg_gray_bg').show();
		$('#androidbg_gray_bg').remove();
	} else if (platform == "android") {
		$('#androidbg_gray_bg').show();
		$('#iosbg_gray_bg').remove();
	}
	$(function() {
		if (pageStyleID == "1") {
			$('#pageStyle1').attr("checked", true);
		} else {
			$('#pageStyle2').attr("checked", true);
		}
		if (skinStyle == "1") {
			$('#skinStyle1').attr("checked", true);
		} else {
			$('#skinStyle2').attr("checked", true);
		}

		var icons = $('#icons').val();
		var defaultImgs = $('#defaultImgs').val();
		var imgUrl = "{{ctx}}/mam/attachment/download/";
		if (icons !== "") {
			var iconObject = $.parseJSON(icons);
			$.each(iconObject, function(key, value) {
				var input = $("#iconsContainer")
						.find("input[name=" + key + "]");
				$(input).val(value);
				var images = input.parent().parent().find("img");
				$(images).attr("src", imgUrl + value);

			});
		}
		if (defaultImgs !== "") {
			var defaultImgsObject = $.parseJSON(defaultImgs);
			$.each(defaultImgsObject, function(key, value) {
				var input = $("#defaultImgsContainer").find(
						"input[name=" + key + "]");
				$(input).val(value);
				var images = input.parent().parent().find("img");
				$(images).attr("src", imgUrl + value);
			});
		}

		var iconsPad = $('#iconsPad').val();
		var imgUrl = "{{ctx}}/mam/attachment/download/";
		if (iconsPad !== "") {
			var iconObject = $.parseJSON(iconsPad);
			console.log(iconObject);
			$.each(iconObject, function(key, value) {
				var input = $("#iconsPadContainer").find(
						"input[name=" + key + "]");
				$(input).val(value);
				var images = input.parent().parent().find("img");
				$(images).attr("src", imgUrl + value);

			});
		}
		var defaultImgsPad = $('#defaultImgsPad').val();
		if (defaultImgsPad !== "") {
			var defaultImgsObject = $.parseJSON(defaultImgsPad);
			$.each(defaultImgsObject, function(key, value) {
				var input = $("#defaultImgsPadContainer").find(
						"input[name=" + key + "]");
				$(input).val(value);
				var images = input.parent().parent().find("img");
				$(images).attr("src", imgUrl + value);
			});
		}

	});

	function showLogo(btnId,container) {
		$('#upfile').click();
		$('#upfile').bind("change", function() {
			ajaxFileUpload('upfile', btnId,container);
		})

	}

	//图片分辨率

	var logoAndorid = new Array("96*96", "72*72", "48*48", "36*36");
	var welAndroid = new Array("720*1280", "400*800", "320*480", "200*320");

	var logoIphone = new Array("120*120,114*114,72*72");
	var logoIpad = new Array("152*152,144*144,76*76,72*72");
	var welIpadlan = new Array("2048*1496", "1024*748");
	var welIphone = new Array("640*1136", "640*960", "320*480");
	var ajaxFileUpload = function ajaxFileUpload(fileid, btnId, container) {
		var fileidValue = $('#' + fileid).val();
		var tel = /.png$/;
		if (!tel.test(fileidValue)) {
			popover(btnId, "请上传png格式图片");
			return false;
		}

		var picArray = [];

		if (btnId == "logoAndorid") { //android图标
			picArray = logoAndorid;
		} else if (btnId == "welAndroid") {//android启动页
			picArray = welAndroid;
		} else if (btnId == "iosLogo") { //ios图标
			picArray = logoIphone;
		} else if (btnId == "ipadLogo") {//ipad图标
			picArray = logoIpad;
		} else if (btnId == "weliphone") {//ios启动页
			picArray = welIphone;
		} else if (btnId == "welIpadlan") {//ipad启动页
			picArray = welIpadlan;
		}
		var url = "{{ctx}}/mam/attachment/appImageUpload";
		var imgUrl = "{{ctx}}/mam/attachment/download/";
		$.ajaxFileUpload({
			url : url,
			secureuri : false,
			fileElementId : fileid,
			dataType : 'json',
			data : {
				"picArray" : picArray,
			},
			dataType : 'json',
			success : function(response, status) {

				var input = $("#" + container).find("input[type=hidden]");
				var data = response.data;
				for ( var key in data) {
					//$("#iconImage_" + key).attr("src", imgUrl + data[key]);
					//$("#iconInput_" + key).val(data[key]);
					
					$(input[key]).val(data[key]);
					var images = $(input[key]).parent().parent().find("img");
					$(images).attr("src", imgUrl + data[key]);
				}
			},
			error : function(data, status, e) {
				bootbox.alert("系统繁忙，请稍后再试！");
			}
		})
	}

	/*
		获取图片的bundle值
	 */
	function getLogoBundle(id) {
		var mapObject = {};
		var iconsList = $('#' + id).find("input[type=hidden]");
		$(iconsList).each(function(index) {
			var name = $(this).attr("name");
			var value = $(this).val();
			if (value != "") {
				mapObject[name] = value
			}
		});
		return mapObject;
	}

	function logoFormSumbit() {
		//手机logo图标
		var iconsContainer = getLogoBundle("iconsContainer");
		var iconsValue = JSON.stringify(iconsContainer);
		if (iconsValue != "{}") {
			$("#icons").val(iconsValue);
		}
		//手机启动页
		var defaultImgsContainer = getLogoBundle("defaultImgsContainer");
		var defaultImgsValue = JSON.stringify(defaultImgsContainer);
		if (defaultImgsValue != "{}") {
			$("#defaultImgs").val(defaultImgsValue);
		}

		//pad logo图标
		var iconspadContainer = getLogoBundle("iconsPadContainer");
		var iconspadValue = JSON.stringify(iconspadContainer);
		if (iconspadValue != "{}") {
			$("#iconsPad").val(iconspadValue);
		}
		//pad启动页
		var defaultImgsPadContainer = getLogoBundle("defaultImgsPadContainer");
		var defaultImgsPadValue = JSON.stringify(defaultImgsPadContainer);
		if (defaultImgsPadValue != "{}") {
			$("#defaultImgsPad").val(defaultImgsPadValue);
		}
		var data = $('#logoForm').serialize();
		var url = "{{ctx}}/mam/logos/" + platform + "/" + version + "/" + appId;
		$.ajax({
			type : "POST",
			dataType : "json",
			url : url,
			data : data,
			success : function(data, textStatus) {
				if (data.result == "success") {
					enterPackagePage(appId, platform, version);
				} else {
					bootbox.alert("系统繁忙，请稍后再试！");
				}

			},
			error : function() {
				bootbox.alert("系统繁忙，请稍后再试！");
			}
		});
	}

	function enterPackagePage(appId, platform, version) {
		var loadurl = "{{ctx}}/mam/logos/" + platform + "?appId=" + appId
				+ "&version=" + version;
		$.get(loadurl, function(data) {
			$('#panel-3').html(data)
		});
	}
</script>